import React, {Component} from 'react';
import { hashHistory } from 'dva/router';
import {  Modal,  Form,  Input,  Select,  DatePicker,  Popconfirm
    ,  Row,message,  Col,  Button,  Icon,  Upload} from 'antd';

import styles from './main.less';
import * as UserModel from '../model/user';

class _Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag:false,
      number:60,
      btnCodeName:'发送验证码'
    };
  }

  login = async (e) => {
      let phone = this.refs.phoneInput.refs.input.value;
      let code = this.refs.codeInput.refs.input.value;
      if(String.trim(phone) == ""){
        message.warning("请先输入手机号",3);
        return;
      }else if(!(/^1[34578]\d{9}$/.test(phone))){
        message.warning("请输入正确的手机号",3);
        return;
      }else if(String.trim(code) == "" || !(/^\d+$/.test(code)) ){
        message.warning("验证码错误",3);
        return;
      }
      let res = await UserModel.login({phone,code});
      console.log(res)
      if(res.status == 'success'){
        if( 1 || res.data.item.role.indexOf('customer') != -1){
            message.success('登录验证通过');
            hashHistory.push('/');
            clearInterval(this.timer);
          }else{
            message.success('请联系技术部张利涛');
          }
        }else{
            message.error('登录失败，请重新输入');
        }
  }

  sendCode = async (e) => {
      let phone = this.refs.phoneInput.refs.input.value;
      if(String.trim(phone) == ""){
        message.warning("请先输入手机号",3);
        return;
      }else if(!(/^1[34578]\d{9}$/.test(phone))){
        message.warning("请输入正确的手机号",3);
        return;
      }
      let res = await UserModel.sendCode({phone})
      console.log(res)

       //点击的时候改变按钮的状态
      let btnCodeName = `${this.state.number}秒后重新发送`;
      this.setState({flag:true,btnCodeName:btnCodeName});

      //设置定时器
       if(this.state.flag){
         this.timer = setInterval(function(){
              let number = this.state.number;
              number-=1;
              let btnCodeName = `${this.state.number}秒后重新发送`;
              this.setState({
                  number:number,
                  btnCodeName:btnCodeName
              });
              if(this.state.number<0){
                 this.setState({
                    flag:false,
                    number:60,
                    btnCodeName:'发送验证码'
                });
                clearInterval(this.timer)
              }
         }.bind(this),1000)
       }

      if(res.status == 'success'){
            message.success('验证码已发送');

        }else{
            message.error('验证码发送失败');
        }


  }


  render() {
    return (
        <Row type="flex" justify="space-around" style={{background:' linear-gradient(rgba(255,21,0,1) 32%, rgba(255,21,0,1) 100%)'}} align="middle" className={styles.login_wrap}>
          <Col span={6} justify="space-around" style={{background:'#404040',padding:'36px'}}>
                  <Row type="flex" >
                    <Col style={{ fontSize:18,color:'#ffffff'}}>信管平台-客服系统</Col>
                  </Row>
                  <Row style={{ marginTop:10 }}>
                    <Col span={24}><Input addonBefore={<Icon type="phone" />}  placeholder="手机号"  ref="phoneInput"/></Col>
                  </Row>
                  <Row style={{ marginTop:15 }}>
                    <Col span={14}><Input  addonBefore={<Icon type="lock" />}  placeholder="验证码" ref="codeInput"/></Col>
                    <Col span={10}><Button disabled={this.state.flag} type="warning" onClick={this.sendCode} className={styles['login-form-button']}>{this.state.btnCodeName}</Button>
                    </Col>
                  </Row>
                  <Row style={{ marginTop:15 }}>
                    <Col span={24}><Button type="primary" onClick={this.login}   className={styles['login-form-button']}>登陆</Button></Col>
                  </Row>
          </Col>
        </Row>
    );
  }
}

export default _Main;
